<template>
	<div id="box">
		<header>
		<ul>
			<li @click="fanhui"><img src="../assets/img/fanhui2.png"></li>
			<li>奖品详情</li>
			<li @click="xian"><img src="../assets/img/gengduo.png"></li>
		</ul>	
		<div class="chu">
              <ol>
                <router-link to="/shouye">
                <li><img src="../assets/img/chu1.png">返回首页</li>
                </router-link>
                <router-link to="/dengluzhanghao">
                <li><img src="../assets/img/chu2.png">用户中心</li>
              </router-link>
              <router-link to="/yigoujilu">
                <li><img src="../assets/img/chu3.png">一购记录</li>
              </router-link>
              </ol>
            </div>  
	</header>
	<section>
		 <div class="swiper-container">
			  <div class="swiper-wrapper">
			    <div class="swiper-slide"><img src="../assets/img/luobo.png"></div>
			    <div class="swiper-slide"><img src="../assets/img/luobo.png"></div>
			    <div class="swiper-slide"><img src="../assets/img/luobo.png"></div>
			  </div>
		</div>
		<div class="nav">
			<span class="one">已揭晓</span> 加多宝 凉茶 310mlx12罐 整箱装 <span class="two"> 怕上火！ 喝金罐加多宝！</span>
		</div>
		<div class="jindu">
			<ul>
				<li>期号：100065307</li>
				<li><img src="../assets/img/jindutiao2.png"></li>
				<li><p>总需9399人次</p><p>剩余<span>1638</span></p></li>
			</ul>
		</div>
		
		<div class="tu">
			<ul>
				<li><p>图文详情</p><p>建议在wifi下查看<img src="../assets/img/gengduo2.png"></p></li>
				<li><p>往期揭晓</p><p><img src="../assets/img/gengduo2.png"></p></li>
			</ul>
		</div>
		<div class="suoyou">
			<ul>
				<li>所有参与记录</li>
				<li>（2017-05-17 08:23:27开始）</li>
			</ul>
		</div>
		<div class="renyuan">
			<div class="xian"></div>
			<div class="dingwei">
				<div class="one">
					2017-05-17 08:23:35
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
				<div class="two">
				 <dl>
						<dd><img src="../assets/img/touxiang.png"></dd>
						<dt>
							<p>神魂月英</p>
							<p>(中国 ip:139.***.117)</p>
						    <P>参与了<span>2</span>人 2017-05-1 19:27:42</P>
						</dt>
					</dl>
				</div>
			</div>
		</div>
	</section>
	<footer>
		<ul>

		    <li @click="chu"><button>立即参与</button></li>
		    <router-link to="qingdan">
			  <li><img src="../assets/img/gouwuche2.png"></li>
		    </router-link>
		</ul>
	</footer>
	<div class="canyu">
       <img src="../assets/img/canyu.png">
		<div class="one">
			<ul>
				<li></li>
				<li>请选择参与人次</li>
				<li @click="yin">X</li>
			</ul>
		</div>
		<div class="two">
			<p><button>-</button><input type="text"><button>+</button></p>
			<ul>
				<li>5</li>
				<li>20</li>
				<li>50</li>
				<li>我包了</li>
			</ul>
			<h2>共<span>0</span>一购币</h2>
			<h3><button>立即易购</button><button>加入清单</button></h3>
		</div>
	</div>
	</div>
</template>

<script>
 
export default {
  name: 'box',
 methods:{
      fanhui(){
      	this.$router.go(-1);
      },
      chu(){
      	$(".canyu").show();
      	$("header").css({opacity:0.3});
      	$("section").css({opacity:0.3});
      	$("footer").css({opacity:0.3})
       },

       yin(){
        $(".canyu").hide()
        $("header").css({opacity:1});
      	$("section").css({opacity:1});
      	$("footer").css({opacity:1})
       },
      xian(){
    if($(".chu").css('display')=='none'){
      $('.chu').show()
    }else{
      $(".chu").hide()
    }
    
  }
 }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
 @import ".././assets/less/jiangpinxiangqinger.less";
   @import ".././assets/css/reset.css";
</style>